<template>
  <div>
    <el-tree
      ref="refTree"
      :data="perList"
      :props="{label:'name'}"
      show-checkbox
      node-key="id"
      check-strictly
      :default-checked-keys="permIds"
      default-expand-all
    />
    <!-- 底部 -->
    <el-row slot="footer" type="flex" justify="end">
      <el-button size="small" @click="close">取消</el-button>
      <el-button size="small" type="primary" @click="hSubmit">确定</el-button>
    </el-row>
  </div>
</template>
<script>
import { getRoleById, assignPerm } from '@/api/settings'
import { getpermission } from '@/api/permission'
import { tranListToTreeData } from '@/utils/tree'
export default {
  name: '',
  props: {
    roleid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      permIds: [],
      q: {
        page: 1,
        pagesize: 100
      },
      perList: []
    }
  },
  computed: {
  },
  created() {
    this.initRoleInfo()
    this.getAllpIds()
  },
  methods: {
    //   获取所有权限点
    async initRoleInfo() {
      try {
        const res = await getpermission()
        this.perList = tranListToTreeData(res.data)
      } catch (err) {
        console.log(err)
      }
    },
    // 根据id查询所拥有的权限
    async getAllpIds() {
      try {
        const res = await getRoleById(this.roleid)
        this.permIds = res.data.permIds
      } catch (err) {
        console.log(err)
      }
    },
    // 确定提交选中权限
    async hSubmit() {
      try {
        const permIds = this.$refs.refTree.getCheckedKeys()
        await assignPerm({ id: this.roleid, permIds })
        this.$message.success('分配权限成功')
        this.close()
      } catch (err) {
        console.log(err)
      }
    },
    close() {
      this.$emit('perClose')
    }
  }
}
</script>
<style lang='less'  scoped>

</style>
